<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>询价单</title>
    <link rel="icon" href="./favicon.png" />
    <link rel="stylesheet" href="../common/css/reset.css" />
    <link rel="stylesheet" href="../common/css/element-ui.css" />
    <link rel="stylesheet" href="../common/css/common.css" />
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <!-- 用户信息 -->
    <div id="userName" hidden>张三</div>
    <div id="userPhone" hidden>17788889999</div>

    </div>
    <div id="app" v-cloak>
      <!-- top -->
      <div class="top">
        <div class="text">你好,欢迎来到Feijiu网</div>
      </div>
      <!-- header -->
      <header>
        <div class="content">
          <img src="./images/header-1.png" class="img-header-1" />
          <img src="./images/header-2.png" class="img-header-2" />
        </div>
      </header>
      <section class="page-container">
        <div class="page-content">
          <!-- banner -->
          <div class="banner">
            <img src="./images/banner-1.png" class="img-banner-1" />
            <img src="./images/banner-2.png" class="img-banner-2" />
          </div>
          <!-- form -->
          <div class="panel form">
            <div class="panel-left">
              <div class="panel-left-top">
                <img src="./images/icon-1.png" class="icon-1" />
                <div class="text-box">
                  <p class="text-1">
                    你好，欢迎填写<img
                      src="./images/text.png"
                      class="img-text"
                    />信息！
                  </p>
                  <p class="text-2">请仔细填写下方信息以便我们更快帮您报价～</p>
                </div>
              </div>
              <div class="form-box">
                <div class="form-line">
                  <div class="form-line-title">询价信息</div>
                  <textarea
                    v-model="form.message"
                    @change="onValidate('message')"
                    maxlength="400"
                    placeholder="填写询价物资细节描述，如：物资数量、规格尺寸、新旧程度等真实有效信息会更快回应～"
                  ></textarea>
                  <div class="form-error">
                    <span v-show="validate.message.show">
                      * {{validate.message.message}}
                    </span>
                  </div>
                </div>
                <div class="form-line">
                  <div class="form-line-title">联系方式</div>
                  <div class="form-line-content">
                    <div class="form-item">
                      <div class="form-item-label">联系人</div>
                      <input
                        type="text"
                        v-model="form.name"
                        placeholder="请填写您的姓名"
                        @change="onValidate('name')"
                        maxlength="20"
                      />
                      <div class="form-error">
                        <span v-show="validate.name.show">
                          * {{validate.name.message}}
                        </span>
                      </div>
                    </div>
                    <div class="form-item">
                      <div class="form-item-label">联系电话</div>
                      <input
                        type="text"
                        v-model="form.phone"
                        placeholder="请填写您的联系方式"
                        @change="onValidate('phone')"
                      />
                      <div class="form-error">
                        <span v-show="validate.phone.show">
                          * {{validate.phone.message}}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="form-button"
                  @click="onSubmit"
                  :class="{disabled: loading}"
                >
                  <img src="./images/icon-send.png" class="icon-send" />
                  <div class="text">立即发布询价单</div>
                </div>
              </div>
            </div>
            <div class="panel-right">
              <div class="text-box">
                <p class="text-1">
                  <img src="./images/icon-2.png" class="icon-2" />填写遇到问题？
                </p>
                <p class="text-2">可直接拨打 Feijiu 网信息热线</p>
                <p class="text-3">
                  <img src="./images/icon-phone.png" class="icon-phone" />
                  133 4321 5827
                </p>
                <p class="text-2">
                  信息专员会帮您一起确认询价信息，让您省心省时省力
                </p>
              </div>
              <div class="logo-box">
                <img src="./images/logo.png" class="img-logo" />
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
    <script src="../common/js/vue.min.js"></script>
    <script src="../common/js/element-ui.js"></script>
    <script src="./js/ajax.js"></script>
    <script src="./js/index.js"></script>
  </body>
</html>
